<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /课程详情 开始 -->
    <section class="container">
      <section class="path-wrap txtOf hLh30">
        <a href="#" title class="c-999 fsize14">首页</a>
        \
        <a href="#" title class="c-999 fsize14">{{courseWebVo.oneTitle}}</a>
        \
        <span class="c-333 fsize14">{{courseWebVo.towTitle}}</span>
      </section>
      <div>
        <article class="c-v-pic-wrap" style="height: 357px;">
          <section class="p-h-video-box" id="videoPlay">
            <img height="357px" :src="courseWebVo.cover" :alt="courseWebVo.title" class="dis c-v-pic">
          </section>
        </article>
        <aside class="c-attr-wrap">
          <section class="ml20 mr15">
            <h2 class="hLh30 txtOf mt15">
              <span class="c-fff fsize24">{{courseWebVo.title}}</span>
            </h2>
            <section class="c-attr-jg">
              <span class="c-fff">价格：</span>
              <b class="c-yellow" style="font-size:24px;">￥{{courseWebVo.price}}</b>
            </section>
            <section class="c-attr-mt c-attr-undis">
              <span class="c-fff fsize14">主讲： {{courseWebVo.teacherName}}&nbsp;&nbsp;&nbsp;</span>
            </section>
            <section class="c-attr-mt of">
              <span class="ml10 vam">
                <em class="icon18 scIcon"></em>
                <a class="c-fff vam" title="收藏" href="#" >收藏</a>
              </span>
            </section>
            <section  v-if="this.isbuy === 1" class="c-attr-mt">
              <a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
            </section>
            <section  v-else class="c-attr-mt">
              <a @click="createOrders()" href="#" title="立即购买" class="comm-btn c-btn-3">立即购买</a>
            </section>
          </section>
        </aside>
        <aside class="thr-attr-box">
          <ol class="thr-attr-ol">
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">购买数</span>
                <br>
                <h6 class="c-fff f-fM mt10">{{courseWebVo.buyCount}}</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">课时数</span>
                <br>
                <h6 class="c-fff f-fM mt10">{{ courseWebVo.lessonNum}}</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-fff f-fM">浏览数</span>
                <br>
                <h6 class="c-fff f-fM mt10">{{ courseWebVo.viewCount}}</h6>
             </aside>
            </li>
          </ol>
        </aside>
        <div class="clear"></div>
      </div>
      <!-- /课程封面介绍 -->
      <div class="mt20 c-infor-box">
        <article class="fl col-7">
          <section class="mr30">
            <div class="i-box">
              <div>
                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                  <a name="c-i" class="current" title="课程详情">课程详情</a>
                </section>
              </div>
              <article class="ml10 mr10 pt20">
                <div>
                  <h6 class="c-i-content c-infor-title">
                    <span>课程介绍</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <section class="course-txt-body">
                      <p v-html="courseWebVo.description">{{courseWebVo.description}}</p>
                    </section>
                  </div>
                </div>
                <!-- /课程介绍 -->
                <div class="mt50">
                  <h6 class="c-g-content c-infor-title">
                    <span>课程大纲</span>
                  </h6>
                  <section class="mt20">
                    <div class="lh-menu-wrap">
                      <menu id="lh-menu" class="lh-menu mt10 mr10">
                        <ul>
                          <!-- 文件目录 -->
                          <li class="lh-menu-stair" v-for="chapter in chapterVideoList" :key="chapter.id">
                            <a href="javascript: void(0)" :title="chapter.title" class="current-1">
                              <em class="lh-menu-i-1 icon18 mr10"></em>{{chapter.title}}
                            </a>

                            <ol class="lh-menu-ol" style="display: block;">
                              <li class="lh-menu-second ml30" v-for="video in chapter.videos" :key="video.id">
                               <div @click="seeVideo(video.videoSourceId)">
                                   <span class="fr">
                                    <i class="free-icon vam mr10">免费试听</i>
                                  </span>
                                 <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>{{video.title}}
                               </div>


                              </li>

                            </ol>

                          </li>
                        </ul>
                      </menu>
                    </div>
                  </section>
                </div>
                <!-- /课程大纲 -->
                <div>
                  <h6 class="c-i-content c-infor-title">
                    <span>课程评论</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <template>
                      <el-space wrap>

                        <el-form ref="form" :model="form" label-width="80px">
                          <div class="card-header">
                            <el-rate
                              v-model="value1"
                              disabled
                              show-score
                              text-color="#ff9900"
                              score-template="{value}">
                            </el-rate>
                            <br/>
                            <div v-for="o in plnei1" :key="o" class="text item">
                              {{ o.plnr }}
                            </div>
                            <br/>
                            <el-input
                              placeholder="添加评论"
                              v-model="form1.plnr"
                              :disabled="this.isbuy == 0 ? true : false">
                            </el-input>
                            <el-button type="primary" @click="tijiao1">添加评论</el-button>
                          </div>
                        </el-form>

                        <br/>

                        <el-form ref="form" :model="form" label-width="80px">
                          <div class="card-header">
                            <el-rate
                              v-model="value2"
                              disabled
                              show-score
                              text-color="#ff9900"
                              score-template="{value}">
                            </el-rate>
                            <br/>
                            <div v-for="o in plnei2" :key="o" class="text item">
                              {{ o.plnr }}
                            </div>
                            <br/>
                            <el-input
                              placeholder="添加评论"
                              v-model="form2.plnr"
                              :disabled="this.isbuy == 0 ? true : false">
                            </el-input>
                            <el-button type="primary" @click="tijiao2">添加评论</el-button>
                          </div>
                        </el-form>

                        <br/>

                        <el-form ref="form" :model="form" label-width="80px">
                          <div class="card-header">
                            <el-rate
                              v-model="value3"
                              disabled
                              show-score
                              text-color="#ff9900"
                              score-template="{value}">
                            </el-rate>
                            <br/>
                            <div v-for="o in plnei3" :key="o" class="text item">
                              {{ o.plnr }}
                            </div>
                            <br/>
                            <el-input
                              placeholder="添加评论"
                              v-model="form3.plnr"
                              :disabled="this.isbuy == 0 ? true : false">
                            </el-input>
                            <el-button type="primary" @click="tijiao3">添加评论</el-button>
                          </div>
                        </el-form>


                      </el-space>
                    </template>


                    <br/>


                  </div>
                </div>
              </article>
            </div>
          </section>

        </article>
        <aside class="fl col-3">
          <div class="i-box">
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a title href="javascript:void(0)">主讲讲师</a>
              </section>
              <section class="stud-act-list">
                <ul style="height: auto;">
                  <li>
                    <div class="u-face">
                      <a href="#">
                        <img :src="courseWebVo.avatar" width="50" height="50" alt>
                      </a>
                    </div>
                    <section class="hLh30 txtOf">
                      <a class="c-333 fsize16 fl" href="#">{{courseWebVo.teacherName}}</a>
                    </section>
                    <section class="hLh20 txtOf">
                      <span class="c-999">{{courseWebVo.intro}}</span>
                    </section>
                  </li>
                </ul>
              </section>
            </div>
          </div>
        </aside>
        <div class="clear"></div>
      </div>
    </section>
    <!-- /课程详情 结束 -->
    <el-dialog
      class="video"
      @close="colseVideo()"
      :visible.sync="playShow"
    >

      <ali-player
        v-if="playAuth"
        :vid="vid"
        :playauth="playAuth"
        qualitySort="asc"
        format="m3u8"
        mediaType="video"
        :encryptType=1
        ref="player"
        :autoplay=false
        :isLive=false
        :rePlay=false
        :preload=true
        controlBarVisibility="hover"
        :useH5Prism=true
      >
      </ali-player>

    </el-dialog>
  </div>
</template>

<script>
import courseApi from '@/api/course'
import ordersApi from '@/api/orders'

import getAuth from '~/api/vod'

import VueAliplayer from '~/components/VueAliplayer'
import cookie from "js-cookie";
export default {
  components: { "ali-player": VueAliplayer },
   asyncData({ params, error }) {
     return {courseId: params.id}
   },
   data() {
     return {

        courseWebVo: [],
        chapterVideoList: [],
        isbuy: '',
       courseId:'',
       playShow: false,
       vid: '', //视频vid
       playAuth: '', //鉴权地址
       value1: 1,
       value2: 3,
       value3: 5,
       form1: {
         plnr: '',
         teacherId: '',
         courseId: '',
         plId: '',
       },
       form2: {
         plnr: '',
         teacherId: '',
         courseId: '',
         plId: '',
       },
       form3: {
         plnr: '',
         teacherId: '',
         courseId: '',
         plId: '',
       },
       formmem:{

       },
       orderForm:{
         orderNo:'',
         courseId:'',
         courseTitle:'',
         courseCover:'',
         teacherName:'',
         memberId:'',
         nickname:'',
         mobile:'',
         totalFee:'0.01',
         payType:'2',
         status:'0',
       },
       plnei1: [],
       plnei2: [],
       plnei3: []
     }
   },
   created() {//在页面渲染之前执行
     this.initCourseInfo()
     this.chapl1()
     this.chapl2()
     this.chapl3()
      this.initCourseInfo()
     this.CourseInfo()
   },
   methods:{
     //查询所有差评方法
     chapl1() {
       courseApi.getCha1(123)
         .then(response => {
           console.log(response.data.data)
           this.plnei1 = response.data.data
         })
     },
     //查询所有中评方法
     chapl2() {
       courseApi.getCha2(123)
         .then(response => {
           console.log(response.data.data)
           this.plnei2 = response.data.data
         })
     },
     //查询所有好评方法
     chapl3() {
       courseApi.getCha3(123)
         .then(response => {
           console.log(response.data.data)
           this.plnei3 = response.data.data
         })
     },

     //提交差评评论
     tijiao1() {
       this.form1.plId = 1
       this.form1.courseId = 123
       console.log(this.form1.courseId)
       console.log(this.form1)
       courseApi.tj(this.form1)
         .then(response => {
           this.$message.success("添加成功");
           this.chapl1()
           this.form1.plnr = ""
         })
     },
     //提交中评评论
     tijiao2() {
       this.form2.plId = 2
       this.form2.courseId = 123
       console.log(this.form2.courseId)
       console.log(this.form2)
       courseApi.tj(this.form2)
         .then(response => {
           this.$message.success("添加成功");
           this.chapl2()
           this.form2.plnr = ""
         })
     },
     //提交好评评论
     tijiao3() {
       this.form3.plId = 3
       this.form3.courseId = 123
       console.log(this.form3.courseId)
       console.log(this.form3)
       courseApi.tj(this.form3)
         .then(response => {
           this.$message.success("添加成功");
           this.chapl3()
           this.form3.plnr = ""
         })
     },

     colseVideo(){

       // //重新子组件初始化

       this.$refs.player.initAliplayer()

     },

     seeVideo(vid) {



       var that = this
       that.vid=''
       that.playAuth=''

       //根据vid去查凭证
       getAuth.getPlayAuth(vid).then(res => {
         console.log(that.vid)

         that.vid = vid
         that.playAuth = res.data.data
         console.log(that.playAuth)
         that.playShow = true
       })
     },
     //查询课程详情信息
     initCourseInfo() {
        courseApi.getCourseInfo(this.courseId)
          .then(response => {
            console.log(response.data)
            this.courseWebVo=response.data.data
            this.isbuy=response.data.data.isBuy
        })
     },
     CourseInfo() {
        courseApi.getCourseId(this.courseId)
          .then(response => {
            console.log(response)
            this.chapterVideoList=response.data.data
        })
     },
     //生成订单
     createOrders() {
       //从cookie获取用户信息
       var userStr = cookie.get('front_member')
       // 把字符串转换json对象(js对象)
       if(userStr) {
         this.formmem = JSON.parse(userStr)
       }else {
         return;
       }
       this.orderForm.courseId=this.courseWebVo.id
       this.orderForm.courseTitle=this.courseWebVo.title
       this.orderForm.courseCover=this.courseWebVo.cover
       this.orderForm.teacherName=this.courseWebVo.teacherName
       this.orderForm.memberId=this.formmem.id
       this.orderForm.nickname=this.formmem.nickname
       this.orderForm.mobile=this.formmem.mobile
       console.log(this.orderForm)
       ordersApi.createOrders(this.orderForm)
        .then(response => {
          console.log(response)
          //获取返回订单号
          //生成订单之后，跳转订单显示页面
          if (response.data.data!=null){
            this.$router.push({path:'/orders/'+response.data.data})
          }
        })
     }
   }
};
</script>
<style>
.video .el-dialog__header {
  padding: 0;
}

.video .el-dialog__body {
  padding: 0;
}
</style>
